<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>添加爬虫规则</title>

    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />

    <link rel="apple-touch-icon" sizes="76x76" href="/static/img/apple-icon.png" />
    <link rel="icon" type="image/png" href="/static/img/favicon.png" />

    <!--     Fonts and icons     -->
    <!-- <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" /> -->

    <!-- CSS Files -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/static/css/material-bootstrap-wizard.css" rel="stylesheet" />

    <!-- CSS Just for demo purpose, don't include it in your project -->
    <link href="/static/css/demo.css" rel="stylesheet" />

    <style type="text/css">
        .wizard-header{
            padding: 0;
        }
        .input-group{
            width: 100%;
        }
        .url_source{
            width: 40%;
            word-break:break-all;
        }
        .selectting{
            background-color: #dedede !important;
        }
        .selected{
            background-color: #c2c2c2 !important;
        }
        .col-sm-12 .col-sm-3{
            width: 25%;
            margin-left: 0px;
            margin-right: 0px;
            display: inline-block;
        }
        .col-sm-12 .col-sm-4{
            width: 33.333%;
            margin-left: 0px;
            margin-right: 0px;
            display: inline-block;
        }
        .col-sm-12 .col-sm-6{
            width: 50%;
            margin-left: 0px;
            margin-right: 0px;
            display: inline-block;
        }
        
        .made-with-mk{
            width: 60px;
        }
        .made-with{
            left: 70px;
            top: 17px;
        }
    </style>
    
    
    <!-- start: Css -->
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">

    <!-- plugins -->
    <link rel="stylesheet" type="text/css" href="/static/css/plugins/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/plugins/datatables.bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/plugins/animate.min.css"/>
    <link href="/static/css/style.css" rel="stylesheet">
    <!-- end: Css -->
</head>

<body>
    <div id='nonediv' style="display: none;"><div class="col-sm-6">
            <a href="/pac/r/" target="_blank">
                <button id="add_db" class="btn btn-danger" style="margin-top: 0px;"><i class="fa fa-pencil"></i> 新增</button>
            </a>
            <button id="look_db" class="btn btn-danger" style="margin-top: 0px;"><i class="fa fa-pencil"></i> 查看</button>
            <button id="edit_db" class="btn btn-danger" style="margin-top: 0px;"><i class="fa fa-pencil"></i> 编辑</button>
            <button id="del_db" class="btn btn-danger" style="margin-top: 0px;"><i class="fa fa-pencil"></i> 删除</button>
            <button id="qiy_db" class="btn btn-danger" style="margin-top: 0px;"><i class="fa fa-pencil"></i> 启用</button>
            <button id="jiny_db" class="btn btn-danger" style="margin-top: 0px;"><i class="fa fa-pencil"></i> 禁用</button>
        </div></div>
    <div class="image-container set-full-height" style="background-image: url('/static/img/wizard-book.jpg')">
        <!--   Creative Tim Branding   -->
        <a href="/pac/chart/" id='logo_a'>
             <div class="logo-container">
                <div class="logo">
                    <img src="/static/img/new_logo.png">
                </div>
                <div class="brand">{{ user.username }}</div>
            </div>
        </a>

        <!--  Made With Material Kit  -->
        <a href="#" class="made-with-mk">
            <div class="brand">PAC</div>
            <div class="made-with">Made with <strong>pactera</strong></div>
        </a>

        <!--   Big container   -->
        <div class="container">
            <!-- row -->
            <div class="row">
                
                <div class="col-sm-8 col-sm-offset-2" style="margin: 0 auto; width: 100%;">
                    <!--      Wizard container        -->
                    <div class="wizard-container" style="margin:0 auto; width: 1024px;padding-top: 50px;">
                        <div class="card" data-color="red" id="wizard">

                            <!-- ============================================================== -->
                            <!-- Start right Content here -->
                            <div class="content-page">
                                <!-- Start content -->
                                <div class="content" style="margin:0 auto;padding: 10px;">
                                    <div class="responsive-table">
                                      <div id="datatables-example_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                                        <div class="row">
                                          <div id='ccs12' class="col-sm-12">
                                            <table id="datatables-example" class="table table-striped table-bordered dataTable no-footer" width="100%" cellspacing="0" role="grid" aria-describedby="datatables-example_info" style="width: 100%;">
                                              <thead>
                                                <tr role="row">
                                                  <th class="sorting_desc" tabindex="0" aria-controls="datatables-example" rowspan="1" colspan="1" aria-label="ID: activate to sort column descending" style="max-width: 3%;" aria-sort="descending">ID</th>
                                                  <th class="sorting" tabindex="0" aria-controls="datatables-example" rowspan="1" colspan="1" aria-label="ServiceType: activate to sort column ascending" style="max-width: 10%;">业务模块</th>
                                                  <th class="sorting" tabindex="0" aria-controls="datatables-example" rowspan="1" colspan="1" aria-label="City: activate to sort column ascending" style="max-width: 10%;">城市</th>
                                                  <th class="sorting" tabindex="0" aria-controls="datatables-example" rowspan="1" colspan="1" aria-label="URLSource: activate to sort column ascending" style="max-width: 40%;">URL</th>
                                                  <th class="sorting_desc" tabindex="0" aria-controls="datatables-example" rowspan="1" colspan="1" aria-label="Update date: activate to sort column ascending" style="max-width: 10%;">状态</th>
                                                  <th class="sorting" tabindex="0" aria-controls="datatables-example" rowspan="1" colspan="1" aria-label="LastRun date: activate to sort column ascending" style="max-width: 10%;">最后运行时间</th>
                                                  <th class="sorting" tabindex="0" aria-controls="datatables-example" rowspan="1" colspan="1" aria-label="Update date: activate to sort column ascending" style="max-width: 10%;">更新时间</th></tr>
                                              </thead>
                                              <tbody style="font-weight: 500;">
                                                {%for itm in dbs %}
                                                    <tr tid="{{ itm.id }}">
                                                      <td>{{ itm.id }}</td>
                                                      <td>{{ itm.service_type }}</td>
                                                      <td>{{ itm.city }}</td>
                                                      <td class="url_source">{{ itm.url_source }}</td>
                                                      <td class="status{{ itm.url_type }}">{{ itm.url_type }}</td>
                                                      <td>{{ itm.run_time }}</td>
                                                      <td>{{ itm.update_time }}</td>
                                                    </tr>
                                                {% endfor %}
                                              </tbody>
                                            </table>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                </div>
                            </div>
                            <!-- end right Content here -->
                        </div>
                    </div>
                </div>
            </div> <!-- row -->
        </div> <!--  big container -->

        <div class="footer" style="margin-top: 30px;">
            <div class="container text-center">
                 made with <i class="fa fa-heart heart"></i> by <a href="#">pactera</a>
            </div>
        </div>
    </div>

</body>
    <!--   Core JS Files   -->
    <script src="/static/js/jquery-2.2.4.min.js" type="text/javascript"></script>
    <script src="/static/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/static/js/jquery.bootstrap.js" type="text/javascript"></script>

    <!--  Plugin for the Wizard -->
    <script src="/static/js/material-bootstrap-wizard.js"></script>

    <!--  More information about jquery.validate here: http://jqueryvalidation.org/  -->
    <script src="/static/js/jquery.validate.min.js"></script>

    <script type="text/javascript">
    var selected_tid = 0;
    $(function(){
        selected_trs = $("#ccs12 tbody tr");
        selected_trs.hover(function() {
            $(this).addClass("selectting");
        },function() {
            $(this).removeClass("selectting");
        });
        selected_trs.click(function() {
            selected_trs.removeClass("selected"); 
            $(this).addClass("selected");
            selected_tid = $(this).attr('tid');
        });

        // 状态显示优化
        $('[class*="status-2"]').css({'color': '#c23531'}).text('执行失败');
        $('[class*="status-1"]').css({'color': '#2f4554'}).text('已禁用');
        $('[class*="status0"]').css({'color': '#61a0a8'}).text('已删除');
        $('[class*="status1"]').css({'color': '#d48265'}).text('待启用');
        $('[class*="status2"]').css({'color': '#91c7ae'}).text('执行中');
        $('[class*="status3"]').css({'color': '#749f83'}).text('测试');
    });
    </script>

    <!-- start: Javascript -->
    <!-- <script src="/static/js/jquery.min.js"></script> -->
    <script src="/static/js/jquery.ui.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>

    <!-- plugins -->
    <script src="/static/js/plugins/moment.min.js"></script>
    <script src="/static/js/plugins/jquery.datatables.min.js"></script>
    <script src="/static/js/plugins/datatables.bootstrap.min.js"></script>
    <script src="/static/js/plugins/jquery.nicescroll.js"></script>
    <!-- custom -->
    <script src="/static/js/main.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('#datatables-example').DataTable();
      });
    </script>
    <!-- end: Javascript -->

    <script type="text/javascript">
    function getSelect(){
        if(selected_tid && selected_tid > 0){
            return selected_tid;
        }
        alert('请选择一条数据！');
        return false;
    }
    $(function(){
        // alert('HELLO CC!');
        ccrow = $('#ccs12').find('.row:eq(0)');
        ih = $('#nonediv').html();
        $('#nonediv').remove();
        ccrow.children('div').attr('class', 'col-sm-3');
        ccrow.children('div:eq(0)').after(ih);

        $("button[id$='_db']").attr({'style': 'padding:5px 12px;margin-top:3px;'});
        $("#look_db").click(function(){tid=getSelect();if(tid){window.location.replace("/pac/r/look/?tid="+tid);}});
        $("#edit_db").click(function(){tid=getSelect();if(tid){window.location.replace("/pac/r/edit/?tid="+tid);}});
        $("#del_db").click(function(){tid=getSelect();if(tid){
            $.ajax({
                url:"/pac/r/i/del/",
                data:{'tid':tid},
                type:"POST",
                dataType:"TEXT",
                success: function(rets1){
                    console.info('/pac/r/i/del/='+ rets1);
                    rets1 = eval('('+rets1+')');    
                    if(rets1 && rets1.status && rets1.status=='200'){ // 判断是否成功
                        alert('删除成功！');
                        window.location.replace("/pac/r/i");
                    }else{
                        alert('删除失败！');
                    }
                }
            });
        }});
        $("#qiy_db").click(function(){tid=getSelect();if(tid){
            $.ajax({
                url:"/pac/r/i/qiy/",
                data:{'tid':tid},
                type:"POST",
                dataType:"TEXT",
                success: function(rets1){
                    console.info('/pac/r/i/qiy/='+ rets1);
                    rets1 = eval('('+rets1+')');
                    if(rets1 && rets1.status && rets1.status=='200'){ // 判断是否成功
                        alert('启用成功！');
                        window.location.replace("/pac/r/i");
                    }else{
                        alert('启用失败！');
                    }
                }
            });
        }});
        $("#jiny_db").click(function(){tid=getSelect();if(tid){
            $.ajax({
                url:"/pac/r/i/jiny/",
                data:{'tid':tid},
                type:"POST",
                dataType:"TEXT",
                success: function(rets1){
                    console.info('/pac/r/i/jiny/='+ rets1);
                    rets1 = eval('('+rets1+')');
                    if(rets1 && rets1.status && rets1.status=='200'){ // 判断是否成功
                        alert('禁用成功！');
                        window.location.replace("/pac/r/i");
                    }else{
                        alert('禁用失败！');
                    }
                }
            });
        }});
    });

    </script>

</html>
